<script lang="ts" setup>
const activeIndex = ref(0);
const tableList = [
  {
    title: "Fajar",
    timing: "04:41:00 AM"
  },
  {
    title: "Sunrise",
    timing: "05:54:55 AM"
  },
  {
    title: "Dahwa-e-Kubra",
    timing: "11:29:24 AM"
  },
  {
    title: "Zuhr",
    timing: "12:06:09 PM"
  },
  {
    title: "Asr(ShafI)",
    timing: "03:26:44 PM"
  },
  {
    title: "Asr(HanafI)",
    timing: "04:32:01 PM"
  },
  {
    title: "Maghrib",
    timing: "06:18:48 PM"
  },
  {
    title: "Isha(ShafI)",
    timing: "07:04:31 PM"
  },
  {
    title: "Isha(HanafI)",
    timing: "07:30:07 PM"
  }
];
const list = [
  {
    date: "February 2025",
    week: "Sat.",
    tableList
  },
  {
    date: "February 2025",
    week: "Sun.",
    tableList
  },
  {
    date: "February 2025",
    week: "Mon.",
    tableList
  },
  {
    date: "February 2025",
    week: "Tues.",
    tableList
  },
  {
    date: "February 2025",
    week: "Wed.",
    tableList
  },
  {
    date: "February 2025",
    week: "Thur.",
    tableList
  },
  {
    date: "February 2025",
    week: "Fri.",
    tableList
  },
  {
    date: "February 2025",
    week: "Sat.",
    tableList
  },
  {
    date: "February 2025",
    week: "Sun.",
    tableList
  },
  {
    date: "February 2025",
    week: "Mon.",
    tableList
  },
  {
    date: "February 2025",
    week: "Tues.",
    tableList
  },
  {
    date: "February 2025",
    week: "Wed.",
    tableList
  },
  {
    date: "February 2025",
    week: "Thur.",
    tableList
  },
  {
    date: "February 2025",
    week: "Fri.",
    tableList
  },
  {
    date: "February 2025",
    week: "Sat.",
    tableList
  },
  {
    date: "February 2025",
    week: "Sun.",
    tableList
  }
];
import { getSvg } from "@/utils/index";
const maxHeight = ref("0px");
function set_maxHeight(index: number) {
  maxHeight.value = (list[index].tableList.length + 1) * 34 + "px";
}
function handleClick(index: number) {
  if (activeIndex.value === index) {
    activeIndex.value = -1;
  } else {
    activeIndex.value = index;
  }
  set_maxHeight(index);
}
set_maxHeight(0);
</script>
<template>
  <div>
    <p
      class="pb-14 mw-01 ml-auto mr-auto font-normal text-14 text-[#444] lh-16 text-left not-italic"
    >
      {{ $t("title07") }}
    </p>
    <div
      class="mb-14 pb-10 mw-01 ml-auto mr-auto bg-[#fff] shadow-[0px_0px_4px_0px_rgba(0,0,0,0.1)] rounded-10"
    >
      <div
        class="mb-6 w-full h-34 bg-[#149891] rounded-tl-10 rounded-tr-10 bg-[url(@/assets/svg/Frame_401.svg)] bg-no-repeat bg-cover font-600 text-14 text-[#fff] lh-16 not-italic pl-10 flex flex-row justify-start items-center"
      >
        February 2025
      </div>
      <div
        class="mb-6 mw-02 ml-auto mr-auto"
        v-for="(item, index) in list"
        :key="index"
        @click="handleClick(index)"
      >
        <div
          :class="[
            index % 2 === 0 ? 'bg-[#18BDAD]' : 'bg-[#5ADDBF]',
            'h-34  rounded-tl-4 rounded-tr-4 text-14 text-[#fff] lh-16 text-center not-italic px-10 flex flex-row justify-between items-center'
          ]"
        >
          <span class="font-600">{{ index + 1 + " " + item.date }}</span>
          <span class="font-400">{{ item.week }}</span>
        </div>
        <transition name="slide-down">
          <div @click.stop v-if="activeIndex === index">
            <div
              class="bg-[#8964F5] flex justify-between items-center h-34 lh-34"
            >
              <div
                class="w-[50%] pl-10 font-600 text-14 text-[#fff] lh-16 not-italic"
              >
                {{ $t("title08") }}
              </div>
              <van-divider
                vertical
                class="border-color-[rgba(255,255,255,0.3)] mx-0 h-full"
              />
              <div
                class="w-[50%] pl-6 font-600 text-14 text-[#fff] lh-16 not-italic"
              >
                {{ $t("title09") }}
              </div>
            </div>
            <div
              v-for="(childItem, childIndex) in item.tableList"
              :key="childIndex"
            >
              <div
                v-if="childIndex % 2 === 0"
                class="bg-[#FFFFFF] flex justify-between items-center h-34 lh-34"
              >
                <div
                  class="w-[50%] pl-10 font-400 text-14 text-[#444] lh-16 not-italic"
                >
                  {{ childItem.title }}
                </div>
                <van-divider
                  vertical
                  class="border-color-[rgba(228,228,228,0.3)] mx-0 h-full"
                />
                <div
                  class="w-[50%] pl-6 font-400 text-14 text-[#444] lh-16 not-italic"
                >
                  {{ childItem.timing }}
                </div>
              </div>
              <div
                v-else
                class="bg-[#F8F6FE] flex justify-between items-center h-34 lh-34"
              >
                <div
                  class="w-[50%] pl-10 font-400 text-14 text-[#444] lh-16 not-italic"
                >
                  {{ childItem.title }}
                </div>
                <van-divider
                  vertical
                  class="border-color-[rgba(228,228,228,0.3)] mx-0 h-full"
                />
                <div
                  class="w-[50%] pl-6 font-400 text-14 text-[#444] lh-16 not-italic"
                >
                  {{ childItem.timing }}
                </div>
              </div>
            </div>
          </div>
        </transition>
      </div>
    </div>

    <div
      class="pb-16 mw-01 ml-auto mr-auto flex flex-col gap-y-14 justify-start items-stretch"
    >
      <div
        v-for="(,index) in 4"
        :key="index"
        class="flex flex-row justify-start items-center gap-x-27"
      >
        <div
          class="bg-[rgba(232,232,232,0.2)] rounded-20 px-10 w-50% h-30 flex flex-row justify-between items-center"
        >
          <img class="w-21 h-20" :src="getSvg('address')" alt="" />
          <span class="font-400 text-12 text-[#444] lh-14 text-center"
            >Othere City1</span
          >
        </div>
        <div
          class="bg-[rgba(232,232,232,0.2)] rounded-20 px-10 w-50% h-30 flex flex-row justify-between items-center"
        >
          <img class="w-21 h-20" :src="getSvg('address')" alt="" />
          <span class="font-400 text-12 text-[#444] lh-14 text-center"
            >Othere City1</span
          >
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.slide-down-enter-active,
.slide-down-leave-active {
  transition: all 0.3s ease;
  overflow: hidden;
}

.slide-down-enter-from,
.slide-down-leave-to {
  max-height: 0;
  opacity: 0;
}

.slide-down-enter-to,
.slide-down-leave-from {
  max-height: v-bind("maxHeight");
  opacity: 1;
}
</style>
